<template>
	<view class="v-page">
		<view class="v-demo-block">
			<text class="v-demo-block__title">基础演示</text>
			<view class="v-demo-block__content">
				<v-steps :current="current1">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">显示点类型</text>
			<view class="v-demo-block__content">
				<v-steps :current="1" dot>
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
				<v-steps :current="1" dot direction="column">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">错误状态</text>
			<view class="v-demo-block__content">
				<v-steps :current="1">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item error title="仓库着火" desc="10:35">
					</v-steps-item>
					<v-steps-item title="破产清算" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">自定义图标</text>
			<view class="v-demo-block__content">
				<v-steps
					:current="1"
					activeIcon="checkmark"
					inactiveIcon="arrow-right"
				>
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">自定义插槽</text>
			<view class="v-demo-block__content">
				<v-steps :current="1">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40">
						<template v-slot:icon>
							<text class="slot-icon">运</text>
						</template>
					</v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">自定义颜色</text>
			<view class="v-demo-block__content">
				<v-steps :current="1" activeColor="#3c9cff">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
		<view class="v-demo-block">
			<text class="v-demo-block__title">竖向展示</text>
			<view class="v-demo-block__content">
				<v-steps :current="1" direction="column">
					<v-steps-item title="已下单" desc="10:30"> </v-steps-item>
					<v-steps-item title="已出库" desc="10:35"> </v-steps-item>
					<v-steps-item title="运输中" desc="11:40"> </v-steps-item>
				</v-steps>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current1: 1,
		};
	},
	onLoad() {},
};
</script>

<style lang="scss">
.slot-icon {
	width: 21px;
	height: 21px;
	background-color: $v-warning;
	border-radius: 100px;
	font-size: 12px;
	color: #fff;
	line-height: 21px;
	text-align: center;
}
</style>
